<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link rel="stylesheet" href="css/show.css">
<script src="js/jquery-3.4.1.js"></script>
<script src="layui/layui.js"></script>

<div class="gallery">
	<!-- 画廊目录 catalog -->
	<div class="gallery-catalog">
		<div class="one-catalog" th:each="gallery:${session.galleryList}">
			<a th:href="@{/galleryMsg(gid=${gallery.getId()})}" style="text-decoration: none;color: #333;"><p class="cat"  th:text="${gallery.getGtitle()}">画廊目录一</p></a>
		</div>
		<div class="upload">
			<input type="button" value="上传图片到当前" id="add">
			<input type="button" value="新建Gallery" id="addGallery">
		</div>
	</div>
	<!-- 画廊内容（简介 gmsg ，imgs） -->
	<div class="gallery-imgs">
		<!-- one-catalog-gmsg -->
		<div class="one-catalog-gmsg">
			<span>
				<p th:text="${galleryOne.getGmsg()}" class="galmsg">这是画廊目录一的简介（详细信息）,这是画廊目录一的简介（详细信息）</p>
				<p class="galid" th:text="${galleryOne.getId()}" style="display: none">1</p>
				<input type="text" name="msg" class="upmsg" style="display: none;width: 90%;height: 25px;margin-top:10px;padding-left: 3px;" />
			</span>
			<span>
				<a href="#" class="update">修改</a>
				<a href="#" class="access" style="display: none;margin-right: 20px;">保存</a>
				<a th:href="@{/deleteGal(gid=${galleryOne.getId()})}" onclick="deletegal()" th:title="不能删除非空Gallery">删除</a>
			</span>
		</div>
		<!-- one-catalog-imgs -->
		<div class="one-catalog-imgs">
			<ul>
				<li th:each="galleryImg:${galleryImgList}">
					<img th:src="${galleryImg.getGimg()}" alt="">
					<a th:href="@{/deleteGalImg(id=${galleryImg.getId()},gid=${galleryImg.getGid()})}"><input type="button" value="×"></a>
				</li>
			</ul>
		</div>
	</div>

</div>

<!-- 图片上传 -->
<div class="type" id="window" style="display: none;">
	<form action="#" method="POST" enctype="multipart/form-data" id="fileUpload">
		选择：<input type="file" name="file" id="file">
		<input type="text" name="id" th:value="${galleryOne.getId()}" style="display: none;"/>
	</form>
</div>

<!-- 新建gallery -->
<div class="newgallery" id="windows" style="display: none">
	<form action="#" method="post" style="width: 65%;height: 65%;margin: 0 auto;margin-top: 30px;">
		<span>标题：</span><input class="newtitle" type="text" name="title" style="width: 80%;height: 27px;font-size: 15px;padding-left: 3px; "/>
		<br><br>
		<span>描述：</span><input class="newmsg" type="text" name="msg" style="width: 80%;height: 27px;font-size: 15px;padding-left: 3px;"/>
	</form>
</div>

<script>
	//获取项目路径
	var pathName = window.location.pathname;
	var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);

	//加载窗体
	layui.use(['layer','form'], function(){
		var layer=layui.layer;
		var form=layui.form;
		var $=layui.$;

		$("#add").click(function(){
			var id = $(".galid").html();
			layer.open({
				type: 1, 
				title:"上传图片到当前分类",
				area:['40%','35%'],
				btn: ['确定', '取消'], 
				content: $("#window"),
				yes:function(index,layero) {

					//实例化一个表单对象，用于保存数据
					var formData = new FormData($("#fileUpload")[0]);

					$.ajax({
						url: "/addGalImg",
						method: 'post',
						data: formData,
						dataType: 'JSON',
						processData: false,
						contentType: false,
						success: function (res) {
							layer.closeAll();
							window.location.href="galleryMsg?gid="+id;
						}
					});
				}
			}); 
		});

		$("#addGallery").click(function(){
			layer.open({
				type: 1,
				title:"新建Gallery",
				area:['45%','45%'],
				btn: ['确定', '取消'],
				content: $("#windows"),
				yes:function(index,layero){
					$.post('/addGallery',{
						galtitle:$(".newtitle").val(),
						galmsg:$(".newmsg").val()
					},function(data){
						//根据后台返回的参数，来进行判断
						if(data>0){
							layer.closeAll();
							window.location.href="galleryMsg?gid="+$(".galid").html();
						}
					});
				}
			});
		});

	})
</script>

<!-- 实现图片瀑布流排版 -->
<script type="text/javascript">
	
	$(document).ready(function(){
		run();
	});
	
	let i = 0;
	let t = new Array();
	function run(){
		let list = $("li");
		if(i < list.length){
			list[i].setAttribute("style","left: "+(i*185)+"px;");
			if(i<5){
				t[i] = 0;
				list[i].setAttribute("style","top: "+t[i]+"px;left: "+(i*185)+"px;");
				console.log("t:"+t)
			}
			if(i>=5){
				t[i] = t[i-5]+list[i-5].clientHeight+15;
				list[i].setAttribute("style","top: "+t[i]+"px;left: "+((i%5)*185)+"px;");
				console.log("t:"+t)
			}
			i++;
			run();
		}
	}
	</script>

<script>
		var cat = $(".cat");
		var catlog =  $(".one-catalog");
		catlog.click(function () {
			for ( var i = 0 ; i < catlog.length ; i++){
				catlog[i].setAttribute("style","background-color:#fff;");
			}
			$(this).css("background-color","rgba(102, 243, 224, 0.48)");
			$(this).css("border-radius","15px");
		});

	</script>

<!-- 修改gallery信息 -->
<script>
	$(".update").click(function(){
		var galmsg = $(".galmsg").html();
		console.log(galmsg);
		$(".galmsg").css("display","none");
		$(".update").css("display","none");
		$(".upmsg").css("display","inline");
		$(".access").css("display","inline");
		$(".upmsg").attr('value',galmsg);
	});
	$(".access").click(function(){
		$.post("updateGalMsg",{galid:$(".galid").html(),galmsg:$(".upmsg").val()},function(data){
			$(".galmsg").css("display","inline");
			$(".update").css("display","inline");
			$(".upmsg").css("display","none");
			$(".access").css("display","none");
			$(".galmsg").html($(".upmsg").val());
		});
	});

	function deletegal() {
		alert("确定删除？");
	}
</script>

</html>